// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

.@{prefix}-tag {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  padding: @tag-medium-padding;
  height: @tag-height-medium;
  font-size: @tag-medium-font-size;
  line-height: @tag-line-height-medium;
  color: @tag-text-color;
  box-sizing: border-box;
  border-radius: @tag-border-radius-square;
  border: @tag-default-border-width solid @tag-default-border-color;
  white-space: nowrap;

  .@{prefix}-icon {
    margin-right: 4px;
    width: @tag-icon-size;
    height: @tag-icon-size;
    flex-shrink: 0;
  }

  .@{prefix}-tag__icon-close {
    margin-right: 0;
    margin-left: 4px;
    font-size: @tag-large-font-size;
    cursor: pointer;
    transition: color @anim-duration-base @anim-time-fn-easing;
  }

  ::selection {
    background: transparent;
  }

  &--default {
    color: @tag-default-text-color;
    background-color: @tag-default-background-color;

    .@{prefix}-tag__icon-close {
      color: @tag-close-icon-color;

      &:hover {
        color: @tag-close-icon-hover-color;
      }
    }

    &.@{prefix}-tag--checked {
      color: @tag-checked-color;
      background-color: @tag-checked-background-color;

      &:hover {
        background-color: @tag-checked-hover-bg;
      }
    }

    &:active {
      cursor: default;
    }

    &.@{prefix}-tag--check {
      transition: background-color @anim-duration-base @anim-time-fn-easing;
      cursor: pointer;

      &:hover:not(.@{prefix}-tag--checked):not(.@{prefix}-tag--disabled) {
        background-color: @tag-check-hover-bg;
      }
    }

    // 失效标签
    &.@{prefix}-tag--disabled {
      color: @tag-disabled-color;
      background-color: @tag-disabled-bg;
      cursor: not-allowed;

      &:hover {
        color: @tag-disabled-color;
        background-color: @tag-disabled-bg;
      }

      .@{prefix}-icon {
        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  &--primary {
    background-color: @tag-primary-color;

    &.@{prefix}-tag--plain {
      color: @tag-primary-color;
    }
  }

  &--success {
    background-color: @tag-success-color;

    &.@{prefix}-tag--plain {
      color: @tag-success-color;
    }
  }

  &--warning {
    background-color: @tag-warning-color;

    &.@{prefix}-tag--plain {
      color: @tag-warning-color;
    }
  }

  &--danger {
    background-color: @tag-danger-color;

    &.@{prefix}-tag--plain {
      color: @tag-danger-color;
    }
  }

  &--primary {

    &.@{prefix}-tag--light {
      color: @tag-primary-color;
      background-color: @tag-primary-color-light;

      &.@{prefix}-tag--plain {
        color: @tag-primary-color;
      }
    }

    &.@{prefix}-tag--light, &.@{prefix}-tag--plain {
      .@{prefix}-tag__icon-close {
        &:hover {
          color: @brand-color-hover;
        }
      }
    }
  }

  &--success {

    &.@{prefix}-tag--light {
      color: @tag-success-color;
      background-color: @tag-success-color-light;

      &.@{prefix}-tag--plain {
        color: @tag-success-color;
      }
    }

    &.@{prefix}-tag--light, &.@{prefix}-tag--plain {
      .@{prefix}-tag__icon-close {
        &:hover {
          color: @success-color-hover;
        }
      }
    }
  }

  &--warning {

    &.@{prefix}-tag--light {
      color: @tag-warning-color;
      background-color: @tag-warning-color-light;

      &.@{prefix}-tag--plain {
        color: @tag-warning-color;
      }
    }

    &.@{prefix}-tag--light, &.@{prefix}-tag--plain {
      .@{prefix}-tag__icon-close {
        &:hover {
          color: @warning-color-hover;
        }
      }
    }
  }

  &--danger {

    &.@{prefix}-tag--light {
      color: @tag-danger-color;
      background-color: @tag-error-color-light;

      &.@{prefix}-tag--plain {
        color: @tag-danger-color;
      }
    }

    .@{prefix}-tag__icon-close {
      fill: @error-color;

      &:hover {
        fill: @error-color-hover;
      }
    }

    &.@{prefix}-tag--light, &.@{prefix}-tag--plain {
      .@{prefix}-tag__icon-close {
        &:hover {
          color: @error-color-hover;
        }
      }
    }
  }

  &--dark&:not(.@{prefix}-tag--default) {

    .@{prefix}-tag__icon-close {
      fill: @tag-close-icon-color--dark;

      &:hover {
        fill: @tag-close-icon-hover-color--dark;
      }
    }
  }

  &.@{prefix}-tag--plain {
    background-color: @tag-plain-background-color;
  }

  &.@{prefix}-size-s {
    padding: @tag-small-padding;
    height: @tag-height-small;
    font-size: @tag-small-font-size;
    line-height: @tag-line-height-small;

    .@{prefix}-icon {
      font-size: @tag-small-font-size;
    }
  }

  &.@{prefix}-size-l {
    padding: @tag-large-padding;
    height: @tag-height-large;
    font-size: @tag-large-font-size;
    line-height: @tag-line-height-large;

    .@{prefix}-icon {
      font-size: @tag-large-font-size;
    }
  }

  &.@{prefix}-tag--round {
    border-radius: @tag-border-radius-round;
  }

  &.@{prefix}-tag--mark {
    border-radius: 0 @tag-border-radius-round @tag-border-radius-round 0;
  }

  &.@{prefix}-tag--ellipsis {

    .@{prefix}-tag--text {
      display: inline-block;
      .text-ellipsis();
    }
  }
}

a {

  .@{prefix}-tag {
    cursor: pointer;
    transition: all @anim-duration-base linear;

    &:hover {
      color: @link-tag-hover-color;
      background-color: @link-tag-hover-bg;
    }

    &:active {
      color: @link-tag-active-color;
      background-color: @link-tag-active-bg;
    }
  }
}
